<template>
	<!--3.接入完成-->
	<div id="finishInfo" class="cont_three cont_tar">
		<div class="three_onediv">
			<span class="three-title-left">作者姓名：</span>
			<div class="three_div">
				<input type="text" v-model="authorName" name="" id="authorName" />
				<span class="three_onediv_people" @click="updateAuthorName">同著作权人</span>
			</div>
		</div>
		<div class="three_twodiv">
			<span class="three-title-left">署名情况：</span>
			<div class="three_div">
				<Select v-model="singnatureValue" style="width:140px;height: 30px;">
					<Option v-for="item in singnatureData" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
				<div v-if="singnatureValue === '1'" class="three_ul_divs" id="signature_input">
					<span id="updateNickName">别名：</span>
					<input type="text" v-model="aliasName" id="aliasName" />
				</div>
			</div>
		</div>
		<div class="three_twodiv">
			<span class="three-title-left">作者创作性质：</span>
			<div class="three_div">
				<Select v-model="creativeNatureValue" style="width:140px;height: 30px;">
					<Option v-for="item in creativeNatureData" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
				<div v-if="creativeNatureValue === '6'" class="three_ul_divs" id="creativeType_input">
					<span>说明：</span>
					<input type="text" v-model="explainInfo" id="creativeRemark" />
				</div>
			</div>
		</div>
		<div class="three_twodiv">
			<span class="three-title-left">创作完成日期：</span>
			<div class="three_div">
				<DatePicker type="date" :value="dateValue" placeholder="请选择日期" style="width: 200px;margin-bottom: 0;"></DatePicker>
			</div>
		</div>
		<div class="three_twodiv">
			<span class="three-title-left">创作完成地点：</span>
			<div class="three_div">
				<div class="three_difang">
					<span style="width: auto;">国家：</span>
					<input type="text" v-model="countryName" name="" id="creativeCountry" value="" />
					<span style="width: auto;">城市：</span>
					<input type="text" v-model="cityName" name="" id="creativeCity" value="" />
				</div>

			</div>
		</div>
		<div class="three_twodiv" style="height: auto;">
			<span class="three-title-left">发表状态：</span>
			<div class="three_div" >
				<Select v-model="publishStatusValue" style="width:140px;height: 30px;">
					<Option v-for="item in publishStatusData" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</div>
		</div>
		<div v-if="publishStatusValue == '1'" class="three_twodiv" id="publish_time" style="margin-left: 232px;">
			<span></span>
			<div class="three_div">
				<div class="three_difang">
					<span class="three-title-left" style="width: auto;">首次发表日期：</span>
					<DatePicker type="date" :value="dateValueFirst" placeholder="请选择日期" style="width: 200px;margin-bottom: 0;"></DatePicker>
					<span style="width: auto;margin-left: 18px;">发表国家：</span>
					<input type="text" v-model="publishCountryName" name="" id="pubCountry" value="" />
					<span style="width: auto;margin-left: 18px;">发表城市：</span>
					<input type="text" v-model="publichCityName" name="" id="pubCity" value="" />
				</div>
			</div>
		</div>
		<div class="three_twodiv" style="height: auto;">
			<span class="three-title-left">获奖状态：</span>
			<div class="three_div">
				<Select v-model="awardStatusValue" style="width:140px;height: 30px;">
					<Option v-for="item in awardStatusData" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</div>
		</div>
		<div v-if="awardStatusValue == '1'" class="three_twodiv" id="award_info"  style="margin-left: 232px;">
			<span></span>
			<div class="three_div">
				<div class="three_difang">
					<span>获奖名称：</span>
					<input type="text" v-model="getRewardName" name="" id="awardName" value="" />
					<span>颁奖单位：</span>
					<input type="text" v-model="sendRewardCompany" name="" id="awarder" value="" />
				</div>
			</div>
		</div>
		<div class="three_twodiv">
			<span class="three-title-left">权利取得方式：</span>
			<div class="three_div">
				<Select v-model="rightGetTypeValue" style="width:140px;height: 30px;">
					<Option v-for="item in rightGetTypeData" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</div>
		</div>
		<div class="three_twodiv">
			<span class="three-title-left">权利归属方式：</span>
			<div class="three_div" style="float: left;">
				<Select v-model="rightToTypeValue" style="width:140px;height: 30px;">
					<Option v-for="item in rightToTypeData" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</div>
		</div>
		<div class="three_twodiv" v-if="rightToTypeValue === '4'" style="float: left;margin-left: 232px;">
				<div class="upload-file" style="float: left;line-height: 36px;">委托合同扫描件：</div>
				<Upload 
				:max-size="50*1024*1024"
				:default-file-list="defaultList"
				:on-success="handleSuccess"
				id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
					<Button icon="ios-cloud-upload-outline">选择文件</Button>
				</Upload>
		</div>
		<div class="three_threediv" style="clear:both">
			<span class="three-title-left">权利归属方式说明：</span>
			<div class="three_div">
				<textarea name="" v-model="rightBelongTo" rows="" cols="" id="rightGetRemark"></textarea>
			</div>
		</div>
		<div class="three_fourdiv">
			<span class="three-title-left" style="float: left;">权利拥有状况：</span>
			<RadioGroup v-model="RightHaveStatus">
				<Radio label="fourdivAll">
					<span>全部</span>
				</Radio>
				<Radio label="fourdivone">
					<span>部分</span>
					<CheckboxGroup id="checkboxGroupList" v-if="RightHaveStatus === 'fourdivone'" v-model="checkAllGroup" @on-change="checkAllGroupChange">
						<Checkbox v-for="(item, index) in checkboxData" :key="index" :value="item.value"  :label="item.label"></Checkbox>
					</CheckboxGroup>
				</Radio>
			</RadioGroup>
		</div>

		<div class="three_threediv">
			<span class="three-title-left">权利拥有状况说明：</span>
			<div class="three_div">
				<textarea name="" v-model="rightOwnerExplain"  rows="" cols="" id="rightOwnRemark"></textarea>
			</div>
		</div>
		<div class="three_threediv">
			<span class="three-title-left">作品说明书：</span>
			<div class="three_div">
				<textarea name="" v-model="worksExplain" rows="" cols="" id="workInstructions"></textarea>
			</div>
		</div>
		<div class="cont_one_btns">
			<div>
				<span class="cont_one_cancel" @click="backTwoStep()">上一步</span>
				<span class="cont_one_next_step success" @click="finishInfoInput()" >完成</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 作者昵称
				authorName:'',
				defaultList: [
// 					{
// 						'name': 'a42bdcc1178e62b4694c830f028db5c0',
// 						'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
// 				   },
				],
				// 署名
				singnatureValue:'',
				// 别名
				aliasName:'',
				singnatureData:[
					{
						value:'0',
						label:'本名'
					},
					{
						value:'1',
						label:'别名'
					},
					{
						value:'2',
						label:'匿名'
					}
				],
				// 创作性质
				creativeNatureValue:'',
				// 说明
				explainInfo:'',
				creativeNatureData:[
					{
						value:'0',
						label:'原创'
					},
					{
						value:'1',
						label:'改编'
					},
					{
						value:'2',
						label:'翻译'
					},
					{
						value:'3',
						label:'汇编'
					},
					{
						value:'4',
						label:'注释'
					},
					{
						value:'5',
						label:'整理'
					},
					{
						value:'6',
						label:'其他'
					}
				],
				dateValue:'',  //创作时间
				dateValueFirst:'', //首次创作的时间  
				// 国家和城市
				countryName:'',
				cityName:'',
				// 发表状态
				publishStatusValue:'',
				publishStatusData:[
					{
						value:'0',
						label:'未发表',
					},
					{
						value:'1',
						label:'已发表',
					}
				],
				// 发表国家发表城市
				publichCountryName:'',
				publishCityName:'',
				// 获奖状态
				awardStatusValue:'',
				awardStatusData:[
					{
						value:'0',
						label:'未获奖',
					},
					{
						value:'1',
						label:'已获奖',
					}
				],
				// 获奖名称
				getRewardName:'',
				// 颁奖单位
				sendRewardCompany:'',
				// 权利获取方式
				rightGetTypeValue:'',
				rightGetTypeData:[
					{
						value:'0',
						label:'原始',
					},
					{
						value:'1',
						label:'继承',
					},
					{
						value:'2',
						label:'承受',
					},
					{
						value:'3',
						label:'其他',
					}
				],
				// 权利归属方式
				rightToTypeValue:'',
				rightToTypeData:[
					{
						value:'0',
						label:'个人作品',
					},
					{
						value:'1',
						label:'合法作品',
					},
					{
						value:'2',
						label:'法人作品',
					},
					{
						value:'3',
						label:'职务作品',
					},
					{
						value:'4',
						label:'委托作品',
					}
				],
				// 权利归属说明
				rightBelongTo:'',
				// 权利归属状况
				RightHaveStatus:'fourdivAll',
				// 权利归属状况部分
				checkAllGroup:[],
				checkboxData:[
					{
						value:'1',
						label:'发表权',
					},
					{
						value:'2',
						label:'著名权',
					},
					{
						value:'3',
						label:'修改权',
					},
					{
						value:'4',
						label:'保护作品完整权',
					},
					{
						value:'5',
						label:'复制权',
					},
					{
						value:'6',
						label:'发行权',
					},
					{
						value:'7',
						label:'出租权',
					},
					{
						value:'8',
						label:'展览权',
					},
					{
						value:'9',
						label:'表演权',
					},
					{
						value:'10',
						label:'放映权',
					},
					{
						value:'11',
						label:'信息网络传播权',
					},
					{
						value:'12',
						label:'广播权',
					},
					{
						value:'13',
						label:'摄制权',
					},
					{
						value:'14',
						label:'改编权',
					},
					{
						value:'15',
						label:'翻译权',
					},
					{
						value:'16',
						label:'汇编权',
					},
					{
						value:'17',
						label:'其他',
					}
				],
				// 权利拥有说明
				rightOwnerExplain:'',
				// 作品说明
				worksExplain:'',
				
			};
		},
		methods: {
			// 部分在选项状态发生改变时触发
			checkAllGroupChange(data){
				console.log("checkAllGroup="+data)
			},
			//文件上传成功
			handleSuccess (res, file) {
				console.log("文件上传成功res="+JSON.stringify(res))
				console.log("file="+file)
//                 file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
//                 file.name = '7eb99afb9d5f317c912f08b5212fd69a';
			},
			// 同著作权人
			updateAuthorName(){
				// 更新作者姓名
				this.authorName = 'ccm'
			},
			// 返回到第二步
			backTwoStep(){
				//切换顶部的状态
				let statusValue = 'two';
				this.$emit("changestepstatus", statusValue);
			},
			// 完成信息填写
			finishInfoInput(){
				this.$router.push({  //核心语句
					path:'/copyRight/warehouse',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						activeStatus:1 ,  
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	/* //.接入完成 */
	.cont_three {
	    width: 100%;
	    text-align: center;
	}
	.cont_three div {
		text-align: left;
		margin-bottom: 16px;
	}
	.cont_three .three_onediv {
		width: 100%;
		height: 36px;
		margin-top: 42px;
		font-size: 14px;
	}
	.cont_three .three_onediv span {
		display: inline-block;
		width: 200px;
		height: 100%;
		text-align: right;
		vertical-align: middle;
		margin-right: 32px;
		line-height: 36px;
		color: #666;
	}
	.cont_three .three_onediv div input {
		width: 566px;
		height: 34px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		padding-left: 10px;
	}
	.cont_three .three_onediv div span {
		display: inline-block;
		width: 124px;
		font-weight: 400;
		height: 36px;
		text-align: center;
		color: #fff;
		background: rgba(96, 129, 255, 1);
		border-radius: 3px;
		line-height: 36px;
	}
	
	.three_twodiv {
		width: 100%;
		height: 36px;
		font-size: 14px;
		margin-bottom: ;
	}
	.three-title-left {
		display: inline-block;
		width: 200px;
		height: 100%;
		text-align: right;
		vertical-align: middle;
		margin-right: 32px;
		line-height: 36px;
		color: #666;
		float:left;
	}
	.three_twodiv div .three_ul_divs {
		display: inline-block;
		vertical-align: middle;
		margin-left: 32px;
	}
	.three_ul_divs span {
		display: inline-block;
		height: 100%;
		line-height: 36px;
		color: #666;
	}
	.three_ul_divs input {
		width: 478px;
		height: 34px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		padding-left: 10px;
	}
	.three_twodiv div .three_difang {
		width: 100%;
		height: 36px;
	}
	.three_difang span {
		line-height: 36px;
		color: #666;
	}
	.three_difang input:nth-child(2) {
		margin-right: 20px;
	}
	.three_difang input {
		width: 136px;
		height: 34px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		padding-left: 10px;
	}
	.three_twodiv div .creationtime-btn {
		width: 138px;
		height: 34px;
		padding-left: 10px;
		border-radius: 3px;
		border: 1px solid rgba(227, 227, 227, 1);
	}
	.one_li_left {
		display: inline-block;
		vertical-align: middle;
		width: 146px;
		height: 34px;
		margin-right: 28px;
		position: relative;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
	}
	.one_category {
		display: inline-block;
		padding-left: 8px;
	}
	
	.three_threediv {
		width: 100%;
		font-size: 14px;
	}
	.three_threediv div textarea {
		width: 709px;
		min-height: 98px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		outline: none;
		resize: none;
		padding-left: 10px;
	}
	.three_fourdiv {
		width: 100%;
		font-size: 14px;
	}
	.cont_one_btns {
		width: 100%;
		height: 42px;
		margin-top: 46px;
		margin-bottom: 53px;
	}
	.cont_one_btns div {
		/* width: 315px; */
		margin: 0 auto;
		height: 100%;
	}
	.cont_one_btns div span {
		display: inline-block;
		border-radius: 3px;
		line-height: 42px;
		text-align: center;
	}
	.cont_one_cancel {
		width: 146px;
		height: 40px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		cursor: pointer;
	}
	.cont_one_next_step {
		display: inline-block;
		width: 148px;
		height: 42px;
		background: rgba(96, 129, 255, 1);
		margin-left: 12px;
		color: #fff;
		cursor: pointer;
	}
</style>
